<template>
  <div class="mb5 mt5 inline-block rd bg-gray color-black">
    <div
      class="inline-block cursor-pointer border-1 border-white border-r-solid p2"
      @click="handleCategorySearch(null)"
      >动态
      <span class="ml-2 font-size-6 font-bold">{{ momentStatistics.total_num }}</span>
    </div>
    <div
      class="inline-block cursor-pointer border-1 border-white border-r-solid p2"
      data-type="1"
      @click="handleCategorySearch('1')"
      >照片
      <span class="ml-2 font-size-6 font-bold color-black">{{ momentStatistics.img_num }}</span>
    </div>
    <div
      class="inline-block cursor-pointer border-1 border-white border-r-solid p2"
      data-type="2"
      @click="handleCategorySearch('2')"
      >视频
      <span class="ml-2 font-size-6 font-bold color-black">{{ momentStatistics.video_num }}</span>
    </div>
    <div class="inline-block cursor-pointer p2" data-type="0" @click="handleCategorySearch('0')"
      >文字
      <span class="ml-2 font-size-6 font-bold color-black">{{ momentStatistics.text_num }}</span>
    </div>
  </div>

  <el-row>
    <el-col v-for="item in list" :key="item.id" :span="24">
      <el-card :body-style="{ padding: '1.5rem' }" class="mb4">
        <el-row>
          <el-col :span="2" class="color-gray">
            <span class="v-top">
              {{ formatDate(item.createTime, 'DD') }}
            </span>
            <span class="dividingLine font-size-8">/</span>
            <span class="v-bottom font-size-3.5">
              {{ formatDate(item.createTime, 'MM') }}
            </span>
          </el-col>

          <el-col :span="22">
            <div class="mb4">{{ item.content }}</div>
            <!-- 视频 -->
            <template v-if="item.videoUrl">
              <video :src="item.videoUrl" controls></video>
            </template>
            <template v-else-if="item.imgUrl">
              <!-- 图片 -->
              <template v-for="(n, index) in item.imgUrl.split(',')" :key="index">
                <el-image
                  class="m2 h-200px w-200px rd-2.5"
                  :src="n"
                  :zoom-rate="1.2"
                  :max-scale="7"
                  :min-scale="0.2"
                  :initial-index="0"
                  fit="cover"
                />
              </template>
            </template>
          </el-col>
        </el-row>
        <div class="comment">
          <MemberComment :momentId="item.id" />
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { formatDate } from '@/utils/formatTime'
import * as UserApi from '@/api/member/user'
import * as MemberMomentApi from '@/api/member/memberMoment'
import MemberComment from '../memberComment/index.vue'

defineOptions({ name: 'MemberMoment' })

const { user } = defineProps<{ user: UserApi.UserVO }>()

const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
// 动态统计
const momentStatistics = ref({
  total_num: null,
  img_num: null,
  video_num: null,
  text_num: null
})
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  id: null,
  no: null,
  userId: user?.id || null,
  content: null,
  type: null,
  status: null,
  imgUrl: null,
  videoUrl: null,
  creator: null,
  createTime: null,
  updater: null,
  updateTime: null,
  deleted: null,
  tenantId: null
})

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await MemberMomentApi.getMemberMomentPage(queryParams)
    list.value = data.list

    total.value = data.total
  } finally {
    loading.value = false
  }
}

/** 查询统计 */
const getMomentStatistics = async () => {
  const data = await MemberMomentApi.getMomentStatistics(user.id)
  momentStatistics.value = data
}

const handleCategorySearch = (type) => {
  queryParams.type = type
  getList()
}

/** 初始化 **/
onMounted(() => {
  getList()
  getMomentStatistics()
})
</script>
